import React, { useState } from 'react'
import { Button, Form, DatePicker, Select, Table, Input, Row, Col, Modal, message, Menu, Spin, Badge } from 'antd';
import request from '@/http';
import moment from 'moment';
import { history } from '@/.umi/core/history';
import { Repairs } from '@/pages/login/service';
const { Option } = Select;
const { confirm } = Modal;


export default function index() {
    const [formObject] = Form.useForm();//获取数据

    const tableTitle:any[]=[//数据表头
        {title:'登记时间',dataIndex:'beginTime'},{title:'维修时间',dataIndex:'endTime'},{title:'故障物品',dataIndex:'goods'}
        ,{title:'申请人',dataIndex:'student'},{title:'维修人',dataIndex:'maintenanceMan'},{title:'状态',dataIndex:'states',
        render: (states: any,data:any) => {
          return data.state==0?<Badge color="green" text='待维修' />:data.state==1?<Badge color="gold" text='完成' />:<Badge status="default" text='结束' />;
        },}
        ,{title:'操作',
        render: (text:any, record:any) => (
          <>
            <Button type="link" onClick={async () => {
                // await request.get('/api/Repairs/GetRepairs?id='+record.id).then((response:any)=>{
                //   if(response.code==200){
                //     message.success(response.message);
                Repairs.saveRepairsId({id:record.id});
                  history.push('/admin/maintenanceRecord/particulars');
                //     console.log(response);
                //   }else{
                //     message.success(response.message);
                //   }
                // })
              }} >
                查看
            </Button>
          </>
        ),
      }]

      const [pagination, setPagination] = React.useState({//分页器
        showSizeChanger: true,
        pageSizeOptions: ['5','10', '50', '200', '500'],
        showQuickJumper:true,
        defaultPageSize:5,
        showTotal:(total:any, current:any) => `共 ${total} 条记录  第 ${current[0]}~${current[1]}条`,
      });

      const [dataSource, setDataSource] = React.useState<any[]>();//数据集合
      const getData=async (   
        pageValue: any,
        pageSizeValue: any,
        data:any                        
        ) => {
              await request.post('/api/Repairs/GetAllRepairs',{...data}).then((response:any)=>{
                console.log(response.repairslist);
                if(response.code==200&&response.repairslist!=null){
                  const data=response.repairslist.map((item:any,index:number)=>
                  ({
                    key:index,
                    "beginTime": item.beginTime,
                    "endTime": item.endTime,
                    "place":item.place,
                    "goods": item.goods,
                    "content": item.content,
                    "evaluate": item.evaluate,
                    "picture": item.picture,
                    "result": item.result,
                    "state": item.state,
                    "states": item.states,
                    "users": item.users,
                    "id":item.id,
                    "student":item.users.length==2?item.users[0].userName:item.users[0].userName,
                    "maintenanceMan":item.users.length==2?item.users[1].userName:'暂无人维修'
                }))
                const newPageObject = {
                  ...pagination,
                  // current: pageValue,
                  // pageSize: pageSizeValue,
                };
                setPagination(newPageObject);
                setDataSource(data)
                setspinning(false)
                }else{
                  message.error(response.message)
                setspinning(false)
                }
                
            })
      }
    React.useEffect(()=>{
      getData( 1, 5,null);
    },[])
    const [spinning, setspinning] = useState(true);
    return (
      <Spin spinning={spinning} size="large">
        <>
            <Row style={{marginTop:30}} justify="center">
                <Col span={22}>
                    <Form
                        className="ant-advanced-search-form"
                        form={formObject}
                        onFinish={(values:any)=>{
                          setspinning(true)
                          getData( 1, 5,values);
                        }}
                        >
                          <Row gutter={24}>

                          <Col span={6}>
                          <Form.Item label="状态" name="state">
                              <Select placeholder='请选择'>
                                <Option value={0} key={0}>待维修</Option>
                                <Option value={1} key={1}>完成</Option>
                              </Select>
                            </Form.Item>
                          </Col>

                          {/* <Col span={6}>
                          <Form.Item label="维修人" name="userName">
                            <Input placeholder="请录入" />
                            </Form.Item>
                          </Col> */}
                          {/* <Col span={6}>
                          <Form.Item label="登记时间" name="beginTime">
                          <DatePicker
                            format="YYYY-MM-DD HH:mm:ss"
                            showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                          />
                          </Form.Item>
                          </Col>
                          <Col span={6}>
                          <Form.Item label="维修时间" name="endTime">
                          <DatePicker
                            format="YYYY-MM-DD HH:mm:ss"
                            showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                          />
                          </Form.Item>
                          </Col> */}
                          <Col span={6} >
                            <Button type="primary" htmlType="submit">
                              查询
                            </Button>
                            <Button
                              style={{ margin: '0 8px' }}
                              onClick={() => {
                                formObject.resetFields();
                              }}
                            >
                              重置
                            </Button>
                          </Col>
                          </Row>
                    </Form>
                </Col>
                <Col span={22} offset={1}>
                    <Table
                        columns={tableTitle}
                        dataSource={dataSource}
                        pagination={pagination}
                        // onChange={pageOnChange}//分页、排序、筛选变化时触发(用以重新获取数据)
                        tableLayout="fixed"

                    />
                </Col>
            </Row>
        </>
        </Spin>
    )
}
